<template>
    <el-dialog :title="title" :visible.sync="dialogFormVisible" @close="close">
        <el-form ref="form" :model="form" label-width="105px">
            <el-form-item label="上级角色" prop="parent_id">
                <el-select ref="treeRole" v-model="form.parent_id"
                           clearable placeholder="请选择" @clear="handleRoleClear" >
                    <el-option hidden key="parent_id" :value="form.parent_id" :label="role_name"></el-option>
                    <el-tree :data="roleOptions"
                             :props="defaultRoleProps"
                             :expand-on-click-node="false"
                             node-key="seller_role_id"
                             default-expand-all
                             :check-on-click-node="true"
                             @node-click="handleNodeClick">
                    </el-tree>
                </el-select>
            </el-form-item>
            <el-form-item label="角色名称" prop="role_name">
                <el-input v-model="form.role_name" autocomplete="off"></el-input>
            </el-form-item>

            <el-form-item label="是否超级管理" prop="is_type">
                <el-radio-group v-model="form.is_type">
                    <el-radio :label="0" :checked="form.is_type == 0 ? 'checked' : ''">否</el-radio>
                    <el-radio :label="1" :checked="form.is_type == 1 ? 'checked' : ''">是</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="分配权限" prop="role_ids">
                <el-tree ref="tree_role" :check-strictly="checkStrictly" :data="menusData" :props="defaultMenuProps"
                         @check="currentChecked" :default-checked-keys="roleMenuCheckedKeys"
                         show-checkbox node-key="menu_id" class="permission-tree"/>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="close">取 消</el-button>
            <el-button type="primary" @click="save">确 定</el-button>
        </div>
    </el-dialog>
</template>

<script>
    import {create as createRole, update as updateRole} from "@/api/admin/seller/seller_role";

    export default {
        name: "",
        data() {
            return {
                title: "",
                form: {
                    seller_id: 0,
                    parent_id: 0,
                    role_name: '',
                    is_type: 0,
                    menu_ids:[],
                },
                role_name:'',
                roleList:[],
                menusData:[],
                selectedRoleOptions:[],
                roleMenuCheckedKeys:[],
                roleOptions:[],
                dialogFormVisible: false,
                defaultRoleProps:{
                    checkStrictly: true,
                    children: '_child',
                    value: 'seller_role_id',
                    label: 'role_name',
                },
                defaultMenuProps: {
                    children: '_child',
                    label: 'menu_name'
                },
                checkStrictly: false,
            };
        },
        watch: {

        },
        created() {

        },
        mounted () {

        },
        methods: {
            // 获取选中的数据，进行赋值操作
            handleNodeClick(data) {
                // 这里主要配置树形组件点击节点后，设置选择器的值；自己配置的数据，仅供参考
                this.role_name = data.role_name
                this.form.parent_id = data.seller_role_id
                // 选择器执行完成后，使其失去焦点隐藏下拉框的效果
                this.$refs.treeRole.blur()
            },
            handleRoleClear() {
                // 将选择器的值置空
                this.role_name = ''
                this.form.parent_id = ''
            },
            //选择权限
            currentChecked(nodeObj, SelectedObj) {
                console.log(' 这是选中的节点的key数组--'+SelectedObj.checkedKeys)
                console.log('这是选中的节点数组---'+SelectedObj.checkedNodes)
                this.form.menu_ids  = SelectedObj.checkedKeys
            },
            created() {
                // 获取菜单列表
                //this.getSellerMenuList();
            },
            // 获取菜单列表
            async getSellerMenuList(){
                const {data} = await this.$get(this.$api.adminSellerMenu+this.$api.getSelectLists,{role_pid:this.form.parent_id,seller_id: this.form.seller_id});
                this.menusData = data
            },
            showRoleEdit(roleArray,row,i) {
                this.form.seller_id = roleArray.seller_id
                this.roleOptions = roleArray.treeRole
                if (i==1){
                    this.title = "添加";
                    this.dialogFormVisible = true;
                } else {
                    this.menusData = roleArray.treeMenusList
                    if (row.parent_id==0){
                        this.getSellerMenuList()
                    }
                    console.log( "4-》上级分配的权限菜单-"+this.menusData)
                    console.log(this.menusData)
                    if (i==2){
                        console.log("添加子角色")
                        console.log("5-》上级分配的权限菜单--")
                        console.log(roleArray.treeRole.tree_menu)
                        this.title = "添加子角色";
                        this.form.parent_id = roleArray.parent_id

                        this.dialogFormVisible = true;
                    } else if (i==3){
                        this.title = "编辑";
                        this.form = Object.assign({}, row);
                        console.log("6-》编辑内容-"+this.form)
                        console.log(this.form)
                        this.dialogFormVisible = true;
                        console.log(this.dialogFormVisible)
                    }
                }
            },

            generateArr(menus) {
                let data = [];
                menus.forEach(menu => {
                    data.push(menu);
                    if (menu._child) {
                        const temp = this.generateArr(menu._child);
                        _exitIntro()
                        if (temp.length > 0) {
                            data = [...data, ...temp];
                        }
                    }
                });
                console.log(data)
                return data;
            },
            close() {
                this.$refs["form"].resetFields();
                this.form = this.$options.data().form;
                this.dialogFormVisible = false;
            },
            save() {
                this.$refs["form"].validate(async (valid) => {
                    if (valid) {
                        const {msg, status} = this.form.seller_role_id ? await updateRole(this.form) : await createRole(this.form);

                        switch (status) {
                            case 1:
                                this.$message({
                                    message: msg,
                                    type: 'success'
                                });
                                this.form=[]

                                this.$emit("fetchData");
                                this.close();
                                break;
                            default:
                                this.$message({
                                    message: msg,
                                    type: 'error'
                                });
                                break;
                        }
                    } else {
                        return false;
                    }
                });
            },

        },
    };
</script>

<style lang="scss" scoped>
    // 隐藏级联选择器前面的 选择圈（把它变为100%，透明，覆盖在label上）
    .el-cascader-panel{
        .el-radio__inner{
            border: 0px;

      }
      .el-radio__input.is-checked .el-radio__inner{
        background:none;
      }
      .el-radio{
        height: 100%;
        width: 150px;
        position: absolute;
        z-index: 10;
      }
    }
</style>
